<template>
  <div class="chart-container">
    <div class="btn-box"><el-button size="mini" @click="goBack">返回</el-button></div>
    <div ref="twoChart" class="chart-box" style="width: 100%; margin: 0 auto"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import xinJiang from '@/assets/map/xinjiang.json'
import neimengGu from '@/assets/map/neimeng.json'
import taiWan from '@/assets/map/taiwan.json'
import haiNan from '@/assets/map/hainan.json'
import anHui from '@/assets/map/anhui.json'
import jiangXi from '@/assets/map/jiangxi.json'
import huNan from '@/assets/map/hunan.json'
import yunNan from '@/assets/map/yunnan.json'
import guiZhou from '@/assets/map/guizhou.json'
import guangDong from '@/assets/map/guangdong.json'
import fuJian from '@/assets/map/fujian.json'
import zheJiang from '@/assets/map/zhejiang.json'
import jiangSu from '@/assets/map/jiangsu.json'
import siChuan from '@/assets/map/sichuan.json'
import chongQing from '@/assets/map/chongqing.json'
import huBei from '@/assets/map/hubei.json'
import heNan from '@/assets/map/henan.json'
import shanDong from '@/assets/map/shandong.json'
import jiLin from '@/assets/map/jilin.json'
import liaoNing from '@/assets/map/liaoning.json'
import tianJin from '@/assets/map/tianjin.json'
import beiJing from '@/assets/map/beijing.json'
import heBei from '@/assets/map/hebei.json'
import shanXi from '@/assets/map/shanxi.json'
import shanXi1 from '@/assets/map/shanxi1.json'
import ningXia from '@/assets/map/ningxia.json'
import aomen from '@/assets/map/aomen.json'
import xianggang from '@/assets/map/xianggang.json'
import guangxi from '@/assets/map/guangxi.json'
import ganSu from '@/assets/map/gansu.json'
import heiLongJiang from '@/assets/map/heilongjiang.json'
import xiZang from '@/assets/map/xizang.json'
import qingHai from '@/assets/map/qinghai.json'
export default {
  data() {
    return {
      cityName: '',
      mapJson: [
        {
          name: '台湾',
          json: taiWan,
          jsonName: 'taiWan',
        },
        {
          name: '海南',
          json: haiNan,
          jsonName: 'haiNan',
        },
        {
          name: '安徽',
          json: anHui,
          jsonName: 'anHui',
        },
        {
          name: '江西',
          json: jiangXi,
          jsonName: 'jiangXi',
        },
        {
          name: '湖南',
          json: huNan,
          jsonName: 'huNan',
        },
        {
          name: '云南',
          json: yunNan,
          jsonName: 'yunNan',
        },
        {
          name: '贵州',
          json: guiZhou,
          jsonName: 'guiZhou',
        },
        {
          name: '广东',
          json: guangDong,
          jsonName: 'guangDong',
        },
        {
          name: '福建',
          json: fuJian,
          jsonName: 'fuJian',
        },
        {
          name: '浙江',
          json: zheJiang,
          jsonName: 'zheJiang',
        },
        {
          name: '江苏',
          json: jiangSu,
          jsonName: 'jiangSu',
        },
        {
          name: '四川',
          json: siChuan,
          jsonName: 'siChuan',
        },
        {
          name: '重庆',
          json: chongQing,
          jsonName: 'chongQing',
        },
        {
          name: '湖北',
          json: huBei,
          jsonName: 'huBei',
        },
        {
          name: '河南',
          json: heNan,
          jsonName: 'heNan',
        },
        {
          name: '山东',
          json: shanDong,
          jsonName: 'shanDong',
        },
        {
          name: '吉林',
          json: jiLin,
          jsonName: 'jiLin',
        },
        {
          name: '辽宁',
          json: liaoNing,
          jsonName: 'liaoNing',
        },
        {
          name: '天津',
          json: tianJin,
          jsonName: 'tianJin',
        },
        {
          name: '北京',
          json: beiJing,
          jsonName: 'beiJing',
        },
        {
          name: '河北',
          json: heBei,
          jsonName: 'heBei',
        },
        {
          name: '山西',
          json: shanXi,
          jsonName: 'shanXi',
        },
        {
          name: '陕西',
          json: shanXi1,
          jsonName: 'shanXi1',
        },
        {
          name: '宁夏',
          json: ningXia,
          jsonName: 'ningXia',
        },
        {
          name: '青海',
          json: qingHai,
          jsonName: 'qingHai',
        },
        {
          name: '西藏',
          json: xiZang,
          jsonName: 'xiZang',
        },
        {
          name: '黑龙江',
          json: heiLongJiang,
          jsonName: 'heiLongJiang',
        },
        {
          name: '内蒙古',
          json: neimengGu,
          jsonName: 'neimengGu',
        },
        {
          name: '甘肃',
          json: ganSu,
          jsonName: 'ganSu',
        },
        {
          name: '新疆',
          json: xinJiang,
          jsonName: 'xinJiang',
        },
        {
          name: '广西',
          json: guangxi,
          jsonName: 'guangxi',
        },
        {
          name: '香港',
          json: xianggang,
          jsonName: 'xianggang',
        },
        {
          name: '澳门',
          json: aomen,
          jsonName: 'aomen',
        },
      ],
      selectMap: [],
      selectNum: 0,
      selectObj: '',
      mapList: [],
    }
  },
  mounted() {
    this.cityName = this.$route.query.cityName || ''
    this.selectMap = this.mapJson.filter(item => this.cityName.includes(item.name))
    console.log(this.selectMap)
    this.selectObj = this.selectMap[0]
    const list = require(`@/assets/travelList/${this.selectObj.jsonName}.json`)
    let cityList = list.data.cityList
    cityList.forEach((item, index) => {
      let arr = { name: item, selected: false, value: index + 1 }
      this.mapList.push(arr)
    })
    this.initChart()
  },
  methods: {
    initChart() {
      const option = {
        backgroundColor: '#fff', // 背景颜色
        title: {
          text: this.cityName,
          left: 'center',
        },
        series: [
          {
            type: 'map',
            mapType: this.selectObj.jsonName,
            mapTitle: '1',
            label: {
              // 图形上的文本标签
              normal: {
                // 通常状态下的样式
                show: true,
                textStyle: {
                  color: '#ccbbff',
                },
              },
              emphasis: {
                // 鼠标放上去高亮的样式
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              // 地图区域的样式设置
              normal: {
                // 通常状态下的样式
                borderColor: '#e8ccff',
                borderWidth: 1,
              },
              // 鼠标放上去高亮的样式
              emphasis: {
                areaColor: '#9955ff',
                borderWidth: 0,
              },
            },
            aspectScale: 0.75,
            // zoom: 1./2,
            data: this.mapList, //各省地图颜色数据依赖value
          },
        ],
        dataRange: {
          x: '-1000 px', //图例横轴位置
          y: '-1000 px', //图例纵轴位置
          splitList: [
            { start: 1, end: 1, color: '#ff88c2' },
            { start: 2, end: 2, color: '#ff8888' },
            { start: 3, end: 3, color: '#ffa488' },
            { start: 4, end: 4, color: '#ffbb66' },
            { start: 5, end: 5, color: '#ffdd55' },
            { start: 6, end: 6, color: '#ffff77' },
            { start: 7, end: 7, color: '#ddff77' },
            { start: 8, end: 8, color: '#bbff66' },
            { start: 9, end: 9, color: '#66ff66' },
            { start: 10, end: 10, color: '#77ffcc' },
            { start: 11, end: 11, color: '#77ffee' },
            { start: 12, end: 12, color: '#66ff66' },
            { start: 13, end: 13, color: '#77ddff' },
            { start: 14, end: 14, color: '#99bbff' },
            { start: 15, end: 15, color: '#9f88ff' },
            { start: 16, end: 16, color: '#b088ff' },
            { start: 17, end: 17, color: '#d28eff' },
            { start: 18, end: 18, color: '#e38eff' },
            { start: 19, end: 19, color: '#ff77ff' },
            { start: 20, end: 20, color: '#ffb7dd' },
            { start: 21, end: 21, color: '#ffcccc' },
            { start: 22, end: 22, color: '#ffc8b4' },
            { start: 23, end: 23, color: '#ffddaa' },
            { start: 24, end: 24, color: '#ffee99' },
            { start: 25, end: 25, color: '#ffffbb' },
            { start: 26, end: 26, color: '#eeffbb' },
            { start: 27, end: 27, color: '#ccff99' },
            { start: 28, end: 28, color: '#99ff99' },
            { start: 29, end: 29, color: '#bbffee' },
            { start: 30, end: 30, color: '#aaffee' },
            { start: 31, end: 31, color: '#99ffff' },
            { start: 32, end: 32, color: '#cceeff' },
            { start: 33, end: 33, color: '#ccddff' },
            { start: 34, end: 34, color: '#ccccff' },
          ],
        },
      }
      echarts.registerMap(this.selectObj.jsonName, this.selectObj.json)
      let chart = echarts.init(this.$refs.twoChart)
      chart.setOption(option)
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
    goBack() {
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-container {
  margin-top: 15px;
  .btn-box {
    width: 100%;
    text-align: right;
    padding-right: 25px;
  }
  .chart-box {
    height: calc(140vh - 100px);
  }
}
</style>
